<script setup lang="ts">
defineProps<{
  avatar: string,
  nickname: string,
  content: string,
  createTime: string,
  score: number
}>()

</script>

<template>
  <div class="comment-item">
    <div class="comment-item-left">
      <VanImage :src="avatar" width="50" round/>
    </div>
    <div class="comment-item-right">
      <h1 class="nickname">{{ nickname }}</h1>
      <div>
        <span class="score">
          <i>{{ score }}</i>分
        </span>
        <span class="time">{{ createTime }}</span>
      </div>
      <p class="content">{{ content }}</p>
    </div>
  </div>
</template>

<style scoped lang="less">
.comment-item {
  width: 100vw;
  background-color: var(--jvyou-school-card-background-color);
  padding: 20px 10px;
  display: flex;
  border-bottom: 1px solid #eee;
  font-size: 14px;

  &-right {
    margin-left: 4vw;

    .nickname {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .score {
      color: #ffd21e;
      font-size: 1rem;
      margin-right: 10px;

      i {
        font-size: 1.1rem;
        font-style: normal;
      }
    }

    .time {
      color: #999;
    }

    .content{
      margin-top: 10px;
      line-height: 1.5rem;
    }
  }
}


</style>
